Vue Js todo list App:The VueJs todo list app is a web application built using the Vuejs framework. It enables users to create, manage, and track their tasks or to-do items in an intuitive and responsive manner. The app utilizes Vuejs’s reactive data-binding and component-based architecture to update the UI dynamically as users add or complete tasks. It provides a seamless and efficient user experience, allowing users to add, delete, and mark tasks as completed. Vuejs simplifies the process of creating a robust todo list application by offering a flexible and powerful JavaScript framework for frontend development.
How can I create a Todo List App using Vuejs?
The provided code is a Vuejs Todo List App. It uses Vue.js to create a simple todo list with features like adding, editing, and removing tasks. The app displays an input field to add new tasks and buttons to perform actions. Tasks are listed with checkboxes that can be used to mark them as completed, and completed tasks are displayed with a line-through style and red color. The app’s functionality includes adding a new task, editing an existing task, removing a task, and marking tasks as complete or incomplete.
Vue Js Todo List App Example
<div id="app">
<div class="todo-container">
<h3>Vuejs Todo List Example</h3>
<input type="text" v-model="newTodo" class="todo-input" />
<button @click="addTodo" class="todo-button">
{{ editIndex !== -1 ? 'Edit Todo' : 'Add Todo' }}
</button>
<ul class="todo-list">
<li v-for="(todo, index) in todos" :key="index" class="todo-item">
<input
type="checkbox"
@change="toggleComplete(index)"
class="todo-checkbox"
/>
<span
:style="{ textDecoration: todo.completed ? 'line-through' : 'none', color: todo.completed ? 'red' : 'black' }"
class="todo-text"
>
{{ todo.text }}
</span>
<button @click="removeTodo(index)" class="todo-remove-button">
Remove
</button>
<button @click="editTodo(index)" class="todo-edit-button">
Edit
</button>
</li>
</ul>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
todos: [],
newTodo: "",
editIndex: -1,
};
},
methods: {
addTodo() {
if (this.newTodo.trim() !== "") {
if (this.editIndex !== -1) {
const updatedTodos = [...this.todos];
updatedTodos[this.editIndex] = {
text: this.newTodo,
completed: false,
};
this.todos = updatedTodos;
this.newTodo = "";
this.editIndex = -1;
} else {
this.todos.push({ text: this.newTodo, completed: false });
this.newTodo = "";
}
}
},
removeTodo(index) {
this.todos = this.todos.filter((_, i) => i !== index);
},
toggleComplete(index) {
if (index >= 0 && index < this.todos.length) {
this.todos[index].completed = !this.todos[index].completed;
}
},
editTodo(index) {
this.newTodo = this.todos[index].text;
this.editIndex = index;
},
},
});
app.mount("#app");
</script>
Output of todo list Example
